<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../../assets/css/base.css">
  <style>
    body {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }

    .border {
      /*
         ● border-width 是边框的实际宽度，必须设置
         ● 必须设置 border-style 图片边框才能显示
       */
      border: 100px solid transparent;
      border-image-source: url(../../../assets/images/Border.jpg);
      /*
        划分九宫格，不加单位
         ● border-image-slice: (上右下左);
         ● border-image-slice: (上下) (右左);
         ● border-image-slice: (上) (右左) (下);
         ● border-image-slice: (上) (右) (下) (左);
       */
      border-image-slice: 166.67;

      /*
         ● 划分九宫格后，九宫格的四个顶点分别显示在边框的四个顶点
         ● 四条边分别显示在边框的四条边
         ● border-image-repeat 指定以什么策略铺满边框的四条边
           ■ stretch
           ■ repeat
           ■ round
      */
      border-image-repeat: stretch;

      /*
        边框图片的显示宽度，默认等于 border-width
         ● border-image-width: (上右下左);
         ● border-image-width: (上下) (右左);
         ● border-image-width: (上) (右左) (下);
         ● border-image-width: (上) (右) (下) (左);
       */
      border-image-width: 50px;
    }

    .repeat {
      border-image-repeat: repeat;
    }

    .round {
      border-image-repeat: round;
    }

    .content {
      width: 200px;
      height: 200px;
      background-color: rgba(17, 119, 255, 0.5);
    }
  </style>
</head>

<body>
  <div>
    <p class="title">border-image-repeat: stretch;</p>
    <div class="border">
      <div class="content"></div>
    </div>
  </div>

  <div>
    <p class="title">border-image-repeat: repeat;</p>
    <div class="border repeat">
      <div class="content"></div>
    </div>
  </div>

  <div>
    <p class="title">border-image-repeat: round;</p>
    <div class="border round">
      <div class="content"></div>
    </div>
  </div>
</body>

</html>